<template>
	<el-container id="container">
		<el-main  class="goods_container">
			<el-scrollbar ref="container">
				<el-card class="goods_card" v-for="item in goods" :key="item.id" style="max-width: 1000px">
				    <template #header>
				    	<div class="card-header">
				    		<span>{{item.show.goods_number}}</span>
				    	</div>
				    </template>
				    <p class="font24">{{item.show.goods_desc}}</p>
				    <p class="font24">{{item.show.sku_text}}</p>
				    <p class="font24">
				    	<el-input type="number" placeholder="数量" v-model="item.num_type_value" style="width:100px;"></el-input>件
				    </p>
				</el-card>
			</el-scrollbar>
			<el-button style="margin-top: 15px; width: 100%; font-size:20px;" type="primary" size="large" @click="submit" :loading="is_loading">入 库</el-button>
			<div style="width: 100%; height: 350px;"></div>
		</el-main>
		<el-main class="button-container">
			<el-button @click="scan" class="wxbutton" type="primary" circle size="large" style="width: 120px; height: 120px;">
				<el-icon :size="70"><FullScreen /></el-icon>
			</el-button>
		</el-main>
	</el-container>
</template>

<script>
	import { FullScreen } from '@element-plus/icons-vue'
	import wx from 'weixin-js-sdk'

	

	export default {
		components: {
		    FullScreen
		},
		data() {
			return {
				wxconfig: {
					appId: '',
					timestamp: '',
					nonceStr: '',
					signature: '',
					jsApiList: [],
					is_ready: false
				},
				goods: [],
				stock_type: 1, //1 入库  2 出库
				is_loading: false,
			}
		},
		watch:{
			
		},
		mounted() {
			var _this = this
			wx.ready(function () {
				// _this.$alert('微信配置成功', "提示", {type: 'success'})
			})
			wx.error(function(res){
				_this.$alert(res, "提示", {type: 'success'})
			});
			this.getConfig()

		},
		methods: {
			// 检查客户端
			judgeClient() {
			  let client = '';
			  if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {  //判断iPhone|iPad|iPod|iOS
			    client = 'iOS';
			  } else if (/(Android)/i.test(navigator.userAgent)) {  //判断Android
			    client = 'Android';
			  } else {
			    client = 'PC';
			  }
			  return client;
			},


			async getConfig() {
				var reqData = {
					uri: window.location.href
				}

				let client = this.judgeClient()

				if (client == 'iOS') {
					reqData.uri = window.location.href.split('#')[0] + '#/' + this.$route.path
				}

				console.log(reqData)
				
				var res = await this.$API.auth.wxconfig.get(reqData)
				if (res.code != 200) {
					this.$alert('获取微信配置失败', "提示", {type: 'error'})
					return
				}
				wx.config({
					debug: false,
					appId: res.data.appId,
					timestamp: res.data.timestamp,
					nonceStr: res.data.noncestr,
					signature: res.data.signature,
					jsApiList: ["scanQRCode"] 
				})
			},
			scan() {
				wx.scanQRCode({
					needResult: 1,
					scanType: ['barCode'],
					success: (res) => {

						var str_arr = res.resultStr.split(',')
						let code = str_arr[1]

						this.getSMGoods(code)
					}
				})
			},
			scan_test() {
				// 测试接口
				this.getSMGoods('ET5800=3242=1');
				
			},
			addGoods(goods) {
				var goods_item = {
					id: this.$TOOL.generateUUID(),
					price_id: goods.price_id,
					stock_type: this.stock_type, //出库
					num_type_value: goods.instock,
					remake: '后台系统微信扫码',
					created_at: '',
					show: {
						goods_number: goods.goods_number,
						goods_desc: goods.goods_desc,
						company_name: goods.company_name,
						sku_text: goods.sku_text
					}
				}
				console.log(goods_item);
				this.goods.push(goods_item);

				const container = document.getElementById('container'); // 替换为你的容器元素ID
				container.scrollIntoView(false);

			},
			async getSMGoods(code) {
				var reqData = {
					code : code
				}
				var res = await this.$API.stock.scanGoods.get(reqData)
				
				if (res.code == 200) {
					this.addGoods(res.data)
				} else {
					return false
				}
			},

			async submit() {

				this.is_loading = true
				var reqData = {
					data: {
						stock_data: this.goods
					}
				}

				var res = await this.$API.stock.stockAddData.post(reqData)
				this.is_loading = false
				if (res.code == 200) {
					this.goods = []
					this.$alert('入库成功', "提示", {type: 'success'})
				} else {
					this.$message.error(res.message)
				}

			}

		}
	}
</script>
<style type="text/css">
	.button-container {
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 2;
		width: 100%;
		bottom: 0px;
	}
	.button-container .wxbutton {
		margin: 0 auto;
	}
	.font24 {
		font-size: 24px ;
	}
	.font24+.font24{
		margin-top: 10px;
	}
	.goods_card + .goods_card {
		margin-top: 15px;
	}
	
</style>